﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>柱状图(文字倾斜)</title>
    <script src=/Content/Scripts/jquery-1.8.3.min.js"></script>
    <script src="/Content/Scripts/highcharts/highcharts.js"></script>

    <script>
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'column',
                    margin: [50, 50, 100, 80]
                },
                title: {
                    text: '2008年人口统计'
                },
                xAxis: {
                    categories: [
                        '北京',
                        '上海',
                        '广州',
                        '深圳',
                        '石家庄',
                        '哈尔滨',
                        '太原',
                        '重庆',
                        '天津',
                        '唐山',
                        '杭州',
                        '西安',
                        '宝鸡'
                    ],
                    labels: {
                        rotation: -45,
                        align: 'right',
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '人口 (百万)'
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '2008年人口: <b>{point.y:.1f} 百万</b>',
                },
                series: [{
                    name: 'Population',
                    data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
                        17.3, 16.8, 15, 14.7],
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#FFFFFF',
                        align: 'right',
                        x: 4,
                        y: 10,
                        style: {
                            fontSize: '13px',
                            textShadow: '0 0 3px black'
                        }
                    }
                }]
            });
        });


    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
